<template>
  <div class="container">
    <van-nav-bar title="个人中心" left-text="🔙" @click-left="goBack"/>

    <div class="background">
      <div class="avatar">
        <img src="/img/头像.jpeg" alt="avatar">
      </div>
      <div class="timeInfo">
        <span>庚子年 【鼠】九月初九</span>
        <span>下午好，知恩</span>
      </div>
      <div class="weather">
        <span>22°</span>
        <span>晴 · 空气质量优</span>
      </div>
    </div>

    <van-swipe class="my-swipe" indicator-color="white">
      <van-swipe-item>
          <div class="swiperContent">
              <div class="contentTop">
                  <van-icon class="fire" name="fire" />
                  <div class="info">
                      <span v-if="levels.busLevel">{{levels.busLevel.busName}}</span>
                      <span v-if="levels.busLevel">{{`LV.${levels.busLevel.level}权益：${levels.busContent}`}}</span>
                  </div>
                  <van-button class="btn" round type="default">引荐</van-button>
              </div>
              <div class="contentBottom" v-if="levels.busLevel">
                  from Mock {{`busLevel:${levels.busLevel.level}`}}
              </div>
          </div>
      </van-swipe-item>
      <van-swipe-item>
          <div class="swiperContent">
               <div class="contentTop">
                  <van-icon class="fire" name="fire" />
                  <div class="info">
                      <span>{{levels.supName}}</span>
                      <span>{{`LV.${levels.supLevel}权益：${levels.supContent}`}}</span>
                  </div>
                  <van-button class="btn" round type="default">引荐</van-button>
              </div>
              <div class="contentBottom">
                  from Mock {{`supLevel:${levels.supLevel}`}}
              </div>
          </div>
      </van-swipe-item>
      <van-swipe-item>
          <div class="swiperContent">
               <div class="contentTop">
                  <van-icon class="fire" name="fire" />
                  <div class="info">
                      <span>{{levels.guidedName}}</span>
                      <span>{{`LV.${levels.guidedLevel}权益：${levels.guidedContent}`}}</span>
                  </div>
                  <van-button class="btn" round type="default">引荐</van-button>
              </div>
              <div class="contentBottom">
                  from Mock {{`guidedLevel:${levels.guidedLevel}`}}
              </div>
          </div>
      </van-swipe-item>
    </van-swipe>

    <div class="salary">
        <div>
            <span>1500.00元</span>
            <span>赚得收入</span> 
        </div>
        <div>
            <span>0.00元</span>
            <span>未提现</span>
        </div>
        <div>
            <span>10人</span>
            <span>我的团队</span>
        </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
export default {
    name:'personal',
    data() {
        return {
            levels:{}
        }
    },
    methods:{
        goBack(){
            this.$router.go(-1);
        }
    },
    async mounted() {
        const {data:{level}} = await axios({
            url: '/mock/mockdata',
            method: 'get'
        });
        this.levels = level;
        console.log(level);
    }
    
}
</script>

<style scoped lang="less">
.container {
    height: 100%;
    background-color:rgb(201, 193, 193);
    position: relative;
    .background {
        display:flex;
        justify-content: space-around;
        background-color: rgba(0, 0, 0, .8);
        width: 100%;
        height: 180px;
        padding: 10px;
        padding-top:20px;
        box-sizing: border-box;
        .avatar img{
            width: 80px;
            height: 80px;
            border-radius: 50%;
            border: 5px #fff solid;
        }
        .timeInfo {
            display:flex;
            margin: 0 10px;
            flex-direction: column;
            color: rgb(252, 173, 5);
            font-size: 20px;
        }
        .weather {
            display:flex;
            flex-direction: column;
            color: #fff;
        }
    }

    .salary {
        display:flex;
        justify-content: space-around;
        align-items: center;
        background:#fff;
        width:95%;
        height: 80px;
        margin: 100px auto 0;
        border-radius: 10px;
        div {
            display:flex;
            flex-direction: column;
        }
    }
}
</style>
